<template>
	<view class="container">
		<u-navbar :bgColor="bgColor" :background="background" :placeholder="true" :safeAreaInsetTop="true">
			<view slot="left">
				<!-- <u-icon name="search" color="#1C1C1C" size="28" @click="goSkillListPage()"></u-icon> -->
			</view>
			<view class="u-nav-center" slot="center">
				次元伴游
			</view>
		</u-navbar>

		<!-- 服务分类骨架 -->
		<view class="type-loading-box" v-if="typeLoading">
			<u-skeleton :loading="typeLoading" :title="true" titleWidth="100%" titleHeight="50"></u-skeleton>
			<view class="type-loading-title">
				<u-skeleton :loading="typeLoading" :title="true" titleWidth="100%"></u-skeleton>
			</view>
		</view>
		<!-- 服务分类 -->
		<view class="type-box" v-if="!typeLoading">
			<view class="item" v-for="(item, index) in skillList" :key="index" @click="goSkillPage(item)">
				<image :src="item.url"></image>
				<text>{{item.tag || ''}}</text>
			</view>
			<view class="item" @click="goSkillListPage()">
				<image src="../../../static/more.png"></image>
				<text>更多</text>
			</view>
		</view>

		<!-- banner骨架 -->
		<view class="banner-loading-box" v-if="bannerLoading">
			<u-skeleton :loading="bannerLoading" :title="true" titleWidth="100%" titleHeight="90"></u-skeleton>
		</view>
		<!-- banner -->
		<view class="banner-box" v-if="!bannerLoading">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item" @click="clickBanner(item)">
						<image :src="item.imgUrl" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 服务列表骨架 -->
		<view class="list-loading-box" v-if="serviceLoading">
			<view class="list-loading-card" v-for="(item, index) in 5" :key="index">
				<u-skeleton rows="4" :loading="serviceLoading" rowsWidth="98%" avatar :title="false" avatarSize="130"
					avatarShape="square"></u-skeleton>
			</view>
		</view>
		<!-- 搭子列表 -->
		<view class="list-box" v-if="!serviceLoading">
			<view class="card" v-for="(item, index) in serviceList" :key="index" @tap="toDetailPage(item)">
				<view class="img-box" @tap.stop.prevent>
					<image class="img" :src="item.avatar" mode=""></image>
					<!-- <view class="btn" @click="playMusic(item, index)">
						<image
							src="https://img1.baa.bitautotech.com/dzusergroupfiles/2024/07/29/5a64837ada5b4e91a55677f295f4474b.jpg"
							class="btn-status" v-show="audioPlayCurrent === index && audioPlay"></image>
						<image
							src="https://img1.baa.bitautotech.com/dzusergroupfiles/2024/07/29/5a64837ada5b4e91a55677f295f4474b.jpg"
							class="btn-status" v-show="!(audioPlayCurrent === index && audioPlay)"></image>
						<image
							src="https://img1.baa.bitautotech.com/dzusergroupfiles/2024/07/29/5a64837ada5b4e91a55677f295f4474b.jpg"
							class="btn-num"></image>
						<view class="time">
							<text>5s</text>
						</view>
					</view> -->
				</view>
				<view class="info-box">
					<view class="top">
						<view class="name-box">
							<view class="name">{{item.realName || ''}}</view>
							<text class="status-online">在线</text>
						</view>
						<view class="flag">
							<view class="img">
								<image src="../../../static/home_page/nan.png" v-if="item.gender == '男'"></image>
								<image src="../../../static/home_page/n.png" v-if="item.gender == '女'"></image>
							</view>
							<view class="title">{{item.gender || ''}}</view>
						</view>
						<block v-for="(a_item,a_index) in item.tag" :key="a_index" v-if="a_index < 2">
							<view class="tag">
								#{{a_item.tag || ''}}
							</view>
						</block>
						<view class="desc">{{item.personalIntro || ''}}</view>
					</view>
					<view class="price">
						<text>12</text>
						<span class="unit">次元币/1h</span>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<view @click="link(`https://beian.miit.gov.cn`)" class="footer">粤ICP备2025415108号-1</view>
	</view>
</template>

<script>
	import {
		swiperLists,
		getSettledLists,
		gettags
	} from '../../../api/user.js';
	export default {
		data() {
			return {
				bgColor: '#ffffff',
				typeLoading: true, // 服务分类骨架加载状态
				bannerLoading: true, // banner骨架加载状态
				serviceLoading: true, // 服务列表骨架加载状态
				status: 'loadmore',
				page: 1,
				pageSize: 10,
				audioContext: null,
				audioPlay: false,
				audioPlayCurrent: null,
				bgColor: "linear-gradient(180deg, #fff2ca, #fff7dc)",
				background: "linear-gradient(180deg, #fff7dc, #ffffff)",
				skillList: [], // 技能列表
				bannerList: [], // 横幅列表
				serviceList: [], // 搭子列表
			}
		},
		computed: {

		},
		watch: {},
		// 页面加载时加载数据
		onLoad() {
			this.gettags();
			this.getServiceList();
		},
		// 上拉加载数据
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page = ++this.page;
			// 获取列表数据
			this.getServiceList();
		},
		// 下拉刷新数据
		onPullDownRefresh() {
			// 清空数据
			this.page = 1;
			this.status = 'loadmore';
			this.serviceList = [];
			// 修改骨架状态
			this.serviceLoading = true;
			// 获取列表数据
			this.getServiceList();
			uni.stopPullDownRefresh();
			uni.showToast({
				mask: true,
				title: "刷新成功",
				icon: "none"
			})
		},
		onLaunch() {
			// #ifdef MP-WEIXIN
			//解决IOS播放没声音
			uni.setInnerAudioOption({
				obeyMuteSwitch: false
			});
			// #endif
		},
		onShow() {
			this.swiperLists();
			this.audioContext = null;
			let totalUnreadCount = uni.getStorageSync("totalUnreadCount");
			if (totalUnreadCount * 1 || totalUnreadCount == '...') {
				uni.setTabBarBadge({
					index: 1,
					text: totalUnreadCount
				});
			} else {
				uni.removeTabBarBadge({
					index: 1
				});
			}
		},
		onUnload() {
			this.audioContext && this.audioContext.destroy();
		},
		methods: {
			link(e){
				window.location.href = e;
			},
			/** 
			@method 获取轮播图列表
			**/
			async swiperLists() {
				try {
					const res = await swiperLists();
					if (res.code == 200) {
						this.bannerList = [...res.data];
						this.bannerLoading = false;
					}
				} catch (err) {
					console.log(err);
				}
			},
			/**
			@method 获取tag标签列表
			**/
			async gettags() {
				try {
					this.tag = [];
					const res = await gettags({
						page: 1,
						pageSize: 4,
					});

					if (res.code === 200) {
						this.skillList = res.data.data;
						this.typeLoading = false;
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			// 获取搭子列表
			getServiceList() {
				getSettledLists({
					page: this.page,
					pageSize: this.pageSize,
					status: 'approved'
				}).then((res) => {
					var data = res.data;
					if (res.code === 200) {
						this.serviceList.push(...data.data);
						this.serviceLoading = false;
						// 判断数据数量，修改状态
						if (data.data.length == 0 || data.data.length < this.pageSize) {
							this.status = 'nomore';
							return;
						}
					} else {
						uni.$u.toast('获取搭子列表失败');
					}
				}).catch((err) => {
					uni.$u.toast(err);
				});
			},
			// 导航栏搜索事件
			search() {
				uni.$u.toast('暂未开放更多游戏～');
			},
			// 跳转到指定技能陪玩列表页面
			goSkillPage(item) {
				// 销毁音频对象
				if (this.audioContext) {
					this.audioPlayCurrent = null;
					this.audioPlay = false;
					this.audioContext.destroy();
				}
				uni.navigateTo({
					url: "/pages/index/skill/skill?skillId=" + item.skillId + "&skillName=" + item.skillName
				})
			},
			// 跳转到技能列表页面
			goSkillListPage() {
				// 销毁音频对象
				if (this.audioContext) {
					this.audioPlayCurrent = null;
					this.audioPlay = false;
					this.audioContext.destroy();
				}
				uni.navigateTo({
					url: "/pages/index/skill-list/skill-list"
				})
			},
			// 播放音乐
			playMusic(item, i) {
				if (this.audioContext) {
					if (this.audioPlayCurrent === i) {
						if (!this.audioPlay) {
							this.audioPlay = true;
							this.audioContext.play();
						} else {
							this.audioContext.pause();
							this.audioPlay = false;
						}
					} else {
						this.audioContext.destroy();
						this.audioContext = null;
						this.createMusic(item, i);
					}
				} else {
					this.createMusic(item, i);
				}
			},
			// 创建音乐对象
			createMusic(item, i) {
				this.audioContext = uni.createInnerAudioContext();
				this.audioContext.src = this.getFileUrl(item.serviceVoice);

				// 监听事件
				this.audioContext.onPlay(() => {
					this.audioPlayCurrent = i;
					this.audioPlay = true;
				});
				this.audioContext.onEnded(() => {
					this.audioContext = null;
					this.audioPlayCurrent = null;
					this.audioPlay = false;
				});
				this.audioContext.onError((err) => {
					console.log("音频播放异常", err);
				});

				// 播放音频
				this.audioContext.play();
			},
			// 跳转到服务详情页面
			toDetailPage(item) {
				// 销毁音频对象
				// if (this.audioContext) {
				// 	this.audioPlayCurrent = null;
				// 	this.audioPlay = false;
				// 	this.audioContext.destroy();
				// }
				
				uni.navigateTo({
					url:`/pages/Home_page/details?id=${item._id}`
				});
			},
			// 横幅点击事件
			clickBanner(item) {
				if (item.bannerType === 1) { // 跳转指定页面
					// 销毁音频对象
					if (this.audioContext) {
						this.audioPlayCurrent = null;
						this.audioPlay = false;
						this.audioContext.destroy();
					}
					uni.navigateTo({
						url: item.pagePath
					})
				} else if (item.bannerType === 2) { // 跳转图片页面
					// 销毁音频对象
					if (this.audioContext) {
						this.audioPlayCurrent = null;
						this.audioPlay = false;
						this.audioContext.destroy();
					}
					uni.navigateTo({
						url: "/pages/index/event/event?url=" + item.imagesPath
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss">
	.container {
		background: linear-gradient(to bottom, #fff, #f6f6f6);
		padding: 0 24rpx;
		padding-top: 10rpx;
		padding-bottom: calc(32rpx + 80rpx);
		padding-bottom: calc(32rpx + 80rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(32rpx + 80rpx + env(safe-area-inset-bottom));

		/deep/ .u-navbar__content {
			background: linear-gradient(180deg, #fff2ca, #fff7dc) !important;
		}
	}
	
	.footer{
		text-align: center;
		color:#999;
		display: block;
	}
	
	.u-nav-center {
		font-size: 32rpx;
		color: #1C1C1C;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.type-loading-box {

		.type-loading-title {
			margin-top: 20rpx;
		}
	}

	.type-box {
		width: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;

		.item {
			padding: 0 15rpx;
			font-size: 22rpx;
			font-weight: Medium;
			text-align: center;
			color: #000000;
			line-height: 32rpx;

			text {
				font-size: 26rpx;
				letter-spacing: 2rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				display: block;
				margin: 0rpx auto;
				margin-bottom: 10rpx;
				letter-spacing: 2rpx;
			}
		}
	}

	.banner-loading-box {
		margin-top: 20rpx;
	}

	.banner-box {
		height: 172rpx;
		overflow: hidden;
		margin-top: 20rpx;
		border-radius: 16rpx;

		swiper,
		image,
		.swiper-item {
			height: 100%;
			width: 100%;
		}
	}

	.list-loading-box {
		margin-top: 20rpx;

		.list-loading-card {
			padding: 15rpx;
			margin-bottom: 20rpx;
			background-color: #FFF;
		}
	}

	.list-box {
		margin-top: 4rpx;
		// padding-bottom: 30rpx;

		.card {
			margin: 24rpx 0;
			display: flex;
			align-items: center;
			padding: 20rpx 15rpx;
			background: #ffffff;
			border: 2rpx solid #f8f8f8;
			border-radius: 16rpx;
			box-shadow: 0px 2rpx 18rpx 6rpx rgba(0, 0, 0, 0.02);
		}

		.img-box {
			width: 230rpx;
			height: 230rpx;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.30));
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.mark {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, rgba(0, 0, 0, 0.30));
			}

			.btn {
				display: flex;
				align-items: center;
				position: absolute;
				width: 152rpx;
				height: 50rpx;
				bottom: 8rpx;
				left: 50%;
				z-index: 10;
				transform: translateX(-50%);

				.btn-status {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					width: 100%;
					height: 100%;
				}

				.btn-num {
					position: relative;
					margin-left: 50rpx;
					margin-right: 2rpx;
					width: 60rpx;
					height: 28rpx;
				}

				.time {
					position: relative;
					font-size: 24rpx;
					color: #000;

					text {
						font-size: 20rpx;
					}
				}
			}
		}

		.info-box {
			flex: 1;
			height: 230rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 25rpx;

			.name-box {
				position: relative;
				display: flex;
				align-items: center;
				padding-right: 80rpx;

				.name {
					font-size: 30rpx;
					letter-spacing: 1rpx;
					color: #000000;
					line-height: 42rpx;
				}

				.sex {
					position: relative;
					margin-left: 10rpx;
					width: 66rpx;
					height: 28rpx;
					text-align: center;
					display: flex;
					color: #fff;
					box-sizing: border-box;
					padding-left: 20rpx;
					padding-bottom: 2rpx;
					justify-content: center;
					align-items: center;
					font-size: 18rpx;

					text {
						position: relative;
						z-index: 10;
					}

					image {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						width: 100%;
						height: 100%;
					}
				}

				.status-online {
					position: absolute;
					top: 50%;
					right: 0;
					padding: 0 16rpx;
					transform: translateY(-50%);
					color: #585858;
					line-height: 28rpx;
					font-size: 20rpx;

					&::after {
						content: "";
						position: absolute;
						width: 12rpx;
						height: 12rpx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						background: #35d944;
						border-radius: 50%;
					}
				}

				.status-offline {
					position: absolute;
					top: 50%;
					right: 0;
					padding: 0 16rpx;
					transform: translateY(-50%);
					color: #585858;
					line-height: 28rpx;
					font-size: 20rpx;

					&::after {
						content: "";
						position: absolute;
						width: 12rpx;
						height: 12rpx;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						background: #D2D2D2;
						border-radius: 50%;
					}
				}
			}

			.flag {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.img {
					position: relative;
					z-index: 10;
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 2rpx solid #fff;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					margin-left: -21rpx;
					padding-left: 26rpx;
					padding-right: 10rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					font-size: 20rpx;
					letter-spacing: 1rpx;
					color: #fff;
					background: linear-gradient(90deg, #676565, #312b22 92%);
					border-radius: 0px 12rpx 6rpx 0px;
				}
			}

			.tag {
				display: inline-block;
				height: 35rpx;
				line-height: 35rpx;
				background: linear-gradient(83deg, #ffe8c8 4%, #fef8ec 94%);
				border-radius: 6rpx;
				padding: 5rpx 20rpx 5rpx 20rpx;
				color: #000000;
				font-size: 24rpx;
				margin-top: 10rpx;
				margin-right: 5rpx;
				letter-spacing: 1rpx;
			}

			.desc {
				font-size: 24rpx;
				letter-spacing: 1rpx;
				margin: 10rpx 0;
				color: #c3c3c3;
				line-height: 34rpx;
				// 文字缩略
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.price {
				height: 36rpx;
				font-size: 26rpx;
				display: flex;
				/* 关键点：让所有子元素底部对齐 */
				align-items: flex-end;
				color: #808080;

				text {
					font-size: 44rpx;
					margin-right: 10rpx;
					font-weight: bold;
					color: #ff6582;
					/* 确保 text 内文字的行高正常 */
					line-height: 1;
				}

				.unit {
					/* 关键点：确保 unit 元素底部对齐 */
					align-self: flex-end;
				}
			}
		}
	}
</style>